<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="#0A5AF9">
    <title>油卡充值</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <!-- <link rel="stylesheet" href="../css/aui.css" /> -->
    <link rel="stylesheet" href="../css/mui.css" />
    <link rel="stylesheet" href="../css/public-head.css" />
    <link rel="stylesheet/less" type="text/css" href="../css/oilCard.less">
</head>

<body>
    <div class="top" >
        <div class="content">
            服务承诺
        </div>
        <div class="mui-tab-item"tapmode onclick="toProblem()">
            <span class="mui-icon mui-icon-info"></span>
            <span class="mui-tab-label" >常见问题</span>
        </div>
    </div>
    <div class="topCard">
        <ul>
            <li>
                <div class="">
                    <img src="../image/oilCard/fwcn-1@2x.png" alt="">
                    <div>自动充值 闪电到账</div>
                </div>
            </li>
            <li>
                <div class="">
                    <img src="../image/oilCard/fwcn-2@2x.png" alt="">
                    <div>全网8折 最低优惠</div>
                </div>
            </li>
            <li>
                <div class="">
                    <img src="../image/oilCard/fwcn-3@2x.png" alt="">
                    <div>银行托管 资金安全</div>
                </div>
            </li>
        </ul>
    </div>
    <div class="mui-content">
        <div id="nearby" class="mui-segmented-control mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item mui-active" href="#online">在线充值</a>
            <a class="mui-control-item " href="#card">充值卡充值</a>
        </div>
        <div id="online" class="mui-slider-item mui-control-content mui-active">
            <!-- 在线 -->
            <div class="mui-numbox" data-numbox-step='100' data-numbox-min='100' data-numbox-min='1000000'>
                <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
                <span>即时<br>充值</span>
                <input class="mui-numbox-input" type="number" />
                <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
            </div>

            <div class="lsitCard">
                <ul class="">
                    <li>
                        <div class="mui-card active">
                            <!--页眉，放置标题-->
                            <div class="mui-card-header">
                                <div class="text-center">
                                    9.4
                                </div>
                                <span>折</span></div>
                            <!--内容区-->
                            <div class="mui-card-content">10个月充值</div>
                            <!--当天充值第一笔，放置补充信息或支持的操作-->
                            <div class="mui-card-footer">当天充值第一笔</div>
                        </div>
                        <p>原价<span class="blue">1300</span> 元</p>
                    </li>
                    <li>
                        <div class="mui-card">
                            <!--页眉，放置标题-->
                            <div class="mui-card-header">
                                <div class="text-center">
                                    9.4
                                </div><span>折</span> </div>
                            <!--内容区-->
                            <div class="mui-card-content">分13个月充值</div>
                            <!--当天充值第一笔，放置补充信息或支持的操作-->
                            <div class="mui-card-footer">当天充值第一笔</div>
                        </div>
                        <p>折扣价<span class="blue">1196</span> 元</p>
                    </li>
                    <li>
                        <div class="mui-card">
                            <!--页眉，放置标题-->
                            <div class="mui-card-header">
                                <div class="text-center">
                                    8.8
                                </div><span>折</span></div>
                            <!--内容区-->
                            <div class="mui-card-content">分25个月到账</div>
                            <!--当天充值第一笔，放置补充信息或支持的操作-->
                            <div class="mui-card-footer">当天充值第一笔</div>
                        </div>
                        <p>共节省<span class="blue">104</span> 元</p>
                    </li>
                </ul>
            </div>

        </div>
        <div id="card" class="mui-slider-item mui-control-content ">
            <!-- 充值卡 -->
            <form class="mui-input-group">
                <div class="mui-input-row">
                    <input type="text" class="mui-input-clear" placeholder="请输入油卡卡号">
                </div>
                <div class="mui-input-row">
                    <div class="mui-input-row">
                        <input type="password" class="mui-input-clear" placeholder="请输入充值卡密码">
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="bottom">
        <button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary isOk">立即充值</button>
    </div>

</body>
<script type="text/javascript" src="../script/less.min.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/public-head.js"></script>
<script src="../script/template-web.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/rem.js"></script>
<script type="text/javascript">
    apiready = function() {
        init();
    }
    headInner({
        title: "油卡充值",
        //headleft
        headl: '<a style="color:white" class="mui-icon mui-icon-left-nav" tapmode onclick="api.closeWin();"></a>',
        //headright
        headr: '<a style="color:white;font-size:14px;" onclick="">订单</a>',
        color: "", //默认是蓝色
        padding: "0px 0px 0px",
    })
    // 充值页
    function Recharge() {
      api.openFrame({
          name: 'purchase',
          url: '../html/purchase.html',
      });

    }
    // 常见问题
    function toProblem() {
      console.log(123123);
      api.openWin({
          name: 'common-problem',
          url: '../html/common-problem.html',
      });

    }

    mui(document.body).on('tap', '.isOk', function(e) {
        mui(this).button('loading');
        Recharge()
        setTimeout(function() {
            mui(this).button('reset');
        }.bind(this), 2000);
    });
</script>

</html>
